import React from 'react';
import * as ReactMixin from "react-mixin";
import Reflux from 'reflux';

import Store from "./Store";
import Actions from "./Actions";
import DB from '../../../../../app/db';
import {Button, Flex, List, Result} from "antd-mobile";
import {RwCode} from '../../const/Const';

import Avatar from '../../../../../assets/icon/vote/ywh/avatar.png';

class YwhTp extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      listHeader: null,
      isVoted: false,
      votedDoorplateId: '',
      candidate: []
    };
    this.doYwhTp = this.doYwhTp.bind(this);
  }

  // 业委会投票
  doYwhTp(data) {
    Actions.doYwhTp(data);
  }

  getCandidates(params) {
    let t = this;
    let candidate = [];

    DB.ywh.getCandidates(params).then(
      function (content) {
        if (content) {
          content.map(c => {
            let voteCount = 0;
            switch (t.props.params.type) {
              case RwCode.CAST01:
                voteCount = c.countUnit;
                break;
              case RwCode.CAST02:
                voteCount = c.countBuilding;
                break;
              case RwCode.CAST03:
                voteCount = c.countMember;
                break;
              case RwCode.CAST04:
                voteCount = c.countHead;
                break;
              default:
                break;
            }
            if (c)
            candidate.push({
              id: c.id,
              name: c.proprietorName,
              courtId: c.courtId,
              building: c.building,
              unit: c.unit,
              doorplateNo: c.doorplateNo,
              label: c.proprietorName+"（"+c.building+"栋"+c.unit+"单元"+c.doorplateNo+"）",
              extra: '得票：'+voteCount+'票'
            })
          })
        }
        t.setState({
          candidate: candidate,
          isLoading: false
        });
      },
      function (error) {
        console.log(error);
      }
    );
  }

  componentWillMount() {

    Actions.initRw();

    let params = {};
    let listHeader = null;

    let rw = this.state.ywhTp.rw;
    switch (this.props.params.type) {
      case RwCode.CAST01:
        params = {
          courtId: rw.courtId,
          building: rw.building,
          unit: rw.unit,
          rwCode: RwCode.CAST01
        };
        listHeader = <div>单元长选举</div>;
        break;
      case RwCode.CAST02:
        params = {
          courtId: rw.courtId,
          building: rw.building,
          rwCode: RwCode.CAST02
        };
        listHeader = <div>楼栋长选举</div>;
        break;
      case RwCode.CAST03:
        params = {
          courtId: rw.courtId,
          rwCode: RwCode.CAST03
        };
        listHeader = <div>委员选举</div>;
        break;
      case RwCode.CAST04:
        params = {
          courtId: rw.courtId,
          rwCode: RwCode.CAST04
        };
        listHeader = <div>主任选举</div>;
        break;
      default:
        break;
    }

    this.setState({
      listHeader: listHeader,
      votedDoorplateId: rw.votedDoorplateId
    });

    this.getCandidates(params);

  }

  render() {

    let t = this;
    let content;
    if (t.state.isLoading) {
      content = <div className="no-data-div">加载中...</div>
    } else {
      if (t.state.candidate && t.state.candidate.length > 0) {
        content = t.state.candidate.map(i => (
          <Flex>
            <Flex.Item style={{ padding: '0 0 0 15px', color: '#888', flex: 'none' }}>
              <img src={Avatar} style={{width: '48px', height: '48px'}} />
            </Flex.Item>
            <Flex.Item>
              <List.Item
                extra={
                  t.state.ywhTp.rw.isVoted
                    ?
                    <Button type="primary" size="small" disabled inline>{this.state.votedDoorplateId === i.id ? '已投' : '投他'}</Button>
                    :
                    <Button type="primary" size="small" inline onClick={() => t.doYwhTp(i)}>投他</Button>
                }
                multipleLine
              >
                <span>{i.name}</span><span style={{fontSize: '9pt'}}>{"（"+i.building+"栋"+i.unit+"单元"+i.doorplateNo+"）"}</span>
                <List.Item.Brief>
                  {i.extra}
                </List.Item.Brief>
              </List.Item>
            </Flex.Item>
          </Flex>
        ));
      } else {
        content = <div className="no-data-div">暂无候选人</div>
      }
    }

    return (

      <div>
        <List renderHeader={() => this.state.listHeader}>{content}</List>
      </div>
    );
  }
}

ReactMixin.onClass(YwhTp, Reflux.connect(Store, 'ywhTp'));

export default YwhTp;
